<template>
  <div class="person">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-form-item :label="hasCar" prop="carRunStatus" class="form-item ">
          <el-select v-model="ruleForm.carRunStatus" placeholder="请选择" @input="vailCarInfo('ruleForm')">
            <el-option v-for="item in hasCarList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="carYear" prop="carRunYear" class="form-item ">
          <el-select v-model="ruleForm.carRunYear" placeholder="请选择" :disabled="isdisabled">
            <el-option v-for="item in carYearList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="jobYear" prop="carEntireYear" class="form-item ">
          <el-select v-model="ruleForm.carEntireYear" placeholder="请选择" :disabled="isdisabled">
            <el-option v-for="item in jobYearList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="familiarCondition" prop="carFamiliarityConditions" class="form-item ">
          <el-select v-model="ruleForm.carFamiliarityConditions" placeholder="请选择" :disabled="isdisabled">
            <el-option v-for="item in familiarConditionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      <footer>
        <el-button @click="before()">上一步</el-button>
        <el-button @click="next('ruleForm')">下一步</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </footer>

    </el-form>
  </div>
</template>

<script>
import eventVue from '../../assets/js/eventVue.js'
export default {
  name: 'OwnOperatingVehicles',
  data() {
      return {
        isdisabled:false,
        selected:0,
        active:0,
        hasCar:'是否拥有营运车辆',
        carYear:'车辆营运年限',
        jobYear:'相关行业从业年限',
        familiarCondition:'本地路况熟悉程度',
        hasCarList:[],
        carYearList:[],
        jobYearList:[],
        familiarConditionList:[],
        ruleForm: {
          carRunStatus: '',
          carRunYear: '',
          carEntireYear: '',
          carFamiliarityConditions: '',
        },
        rules: {
          carRunStatus: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
          carRunYear: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
          carEntireYear: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
          carFamiliarityConditions: [
            { required: true, message: '不能为空', trigger: 'change' },
          ],
        },
        id:'',
        peieceId:''
      };
    },
    mounted(){
        this.$store.commit('title','自有营运车辆情况')
        const instNo = sessionStorage.getItem('instNo')
        this.axios.get('/zyapply-api/parameter/bizSystem/'+instNo).then((res)=>{
           //是否拥有运营车辆
           var hasCarListResult = res.data.data.data[32];
           for(var i=0; i<hasCarListResult.length; i++){
              var card_item = {};
              card_item.value = res.data.data.data[32][i].ovValue;
              card_item.label= res.data.data.data[32][i].ovLabel;
              this.hasCarList.push(card_item);
           }

           //车辆运营年限
           var carYearListResult = res.data.data.data[41];
           for(var i=0; i<carYearListResult.length; i++){
              var card_item = {};
              card_item.value = res.data.data.data[41][i].ovValue;
              card_item.label= res.data.data.data[41][i].ovLabel;
              this.carYearList.push(card_item);
           }

           //相关行业从业年限
           var jobYearListResult = res.data.data.data[42];
           for(var i=0; i<jobYearListResult.length; i++){
              var card_item = {};
              card_item.value = res.data.data.data[42][i].ovValue;
              card_item.label= res.data.data.data[42][i].ovLabel;
              this.jobYearList.push(card_item);
           }
          //  //本地路况熟悉程度
           var familiarConditionListResult = res.data.data.data[43];
           for(var i=0; i<familiarConditionListResult.length; i++){
              var card_item = {};
              card_item.value = res.data.data.data[43][i].ovValue;
              card_item.label= res.data.data.data[43][i].ovLabel;
              this.familiarConditionList.push(card_item);
           }

         }).then((result)=>{
        var params=this.$route.query;
      this.axios.get("/zyapply-api/detailPieces/"+params.pieceId).then((result)=>{
        if(result.data.status==200){
        var info =result.data.data;
        if(info!=null){
          if(info.id!=null&&info.id!=""){
            this.id=info.id;

          }
          if(info.applyDetail.carRunYear!=null&&info.applyDetail.carRunYear!=""){
            this.ruleForm.carRunYear=info.applyDetail.carRunYear;

          }
          if(info.applyDetail.carFamiliarityConditions!=null&&info.applyDetail.carFamiliarityConditions!=""){
            this.ruleForm.carFamiliarityConditions=info.applyDetail.carFamiliarityConditions;

          }
          if(info.applyDetail.carEntireYear!=null&&info.applyDetail.carEntireYear!=""){
            this.ruleForm.carEntireYear=info.applyDetail.carEntireYear;
 
          }
            //this.ruleForm.carRunStatus=info.applyDetail.carRunStatus;
        }
      }
    })
      })


    },
    methods: {
      /**当没有营运车辆时非必填 */

      vailCarInfo(formName) {
        if(this.ruleForm.carRunStatus=='N'){
            this.rules.carRunYear[0].required = false;
            this.rules.carEntireYear[0].required = false;
            this.rules.carFamiliarityConditions[0].required = false;
            this.$refs[formName].validateField('carRunYear',()=>{this.ruleForm.carRunYear='';this.isdisabled = true})
            this.$refs[formName].validateField('carEntireYear',()=>{this.ruleForm.carEntireYear='';this.isdisabled = true})
            this.$refs[formName].validateField('carFamiliarityConditions',()=>{this.ruleForm.carFamiliarityConditions='';this.isdisabled = true})
        }else{
            this.rules.carRunYear[0].required = true;
            this.rules.carEntireYear[0].required = true;
            this.rules.carFamiliarityConditions[0].required = true;
            this.isdisabled = false
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.active=2;
        this.$emit('nextStep3',this.active);
        this.rules.carRunYear[0].required = true;
        this.rules.carEntireYear[0].required = true;
        this.rules.carFamiliarityConditions[0].required = true;
      },
      next(formName) {
        var that = this;
        this.$refs[formName].validate(function(success,error){
          if(success){
            that.$store.commit('title','已有贷款情况')
            that.active=3;
            that.selected=3;
            eventVue.$emit("operatingData", that.ruleForm)
          }else{
            that.active=2;
            that.selected=2;
          }
          that.$emit('nextStep',that.active);
          that.$emit('nextStep2',that.selected);
        })

      },
      before(){
        this.$store.commit('title','房产情况')
        this.active = 1;
        this.selected = 1;
        this.$emit('beforeStep',this.active);
        this.$emit('beforeStep2',this.selected);
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .demo-ruleForm {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    margin-bottom: 80px;
  }

  .form-item {
    min-width: 25%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .full {
    width: 100% !important;
  }

  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    min-height: 80px;
    background: #ddd;
    align-items: center;
    justify-content: center;
  }
</style>
